<HTML>
<HEAD>
	<TITLE>Layout Example</TITLE>
	
	<SCRIPT  src="js/jquery.js"></SCRIPT>
	<SCRIPT  src="js/jquery.layout.js"></SCRIPT>
	<SCRIPT  src="js/tabs.js"></SCRIPT>
	<link rel="stylesheet" href="css/jquery-ui.css" />
	<link rel="stylesheet" href="css/main.css"/>

</HEAD>
<BODY>
	<div class="menuBarBorderLayout">
	<button onclick="">New File</p> </button>
	<button onclick="">Save</p> </button>
	<button onclick="">Open</p> </button>
	<p id="colorpickerHolder"></p>
    <script>
    $('#colorpickerHolder').ColorPicker({flat: true});
    </script>
	</div>
<DIV class="ui-layout-center">
	Canvas for the text and images!
</DIV>



	<div id="tabs" class="ui-layout-north ui-tabs ui-widget ui-widget-content ui-corner-all">
			<ul id="list-tabs" class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
				<li id="tab1" class="tab ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="format" aria-labelledby="ui-id-1" aria-selected="true">
					<a id="ui-id-1" class="ui-tabs-anchor" onclick="swap('1')" role="presentation" tabindex="-1">text</a>
				</li>
				<li id="tab2" class="tab ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="adding" aria-labelledby="ui-id-2" aria-selected="false">
					<a id="ui-id-2" class="ui-tabs-anchor" onclick="swap('2')" role="presentation" tabindex="-1">add</a>
				</li>
			</ul>
			<div id="contentTab1" class="content ui-buttonset ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="ui-id-1" role="tabpanel" aria-expanded="true" aria-hidden="false">
				<input id="check1" class="ui-helper-hidden-accessible" type="checkbox">
				<label id="bold-button" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" for="check1" role="button" aria-disabled="false">
					<span class="ui-button-text">N</span>	
				</label>
				<input id="check2" class="ui-helper-hidden-accessible" type="checkbox">
				<label id="italic-button" class="ui-button ui-widget ui-state-default ui-button-text-only" for="check2" role="button" aria-disabled="false">
					<span class="ui-button-text">N</span>
				</label>
					<input id="check3" class="ui-helper-hidden-accessible" type="checkbox">
				<label id="underline-button" class="ui-button ui-widget ui-state-default ui-button-text-only" for="check3" role="button" aria-disabled="false">
					<span class="ui-button-text">N</span>
				</label>
					<input id="check4" class="ui-helper-hidden-accessible" type="checkbox">
				<label id="cross-button" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right" for="check4" role="button" aria-disabled="false">
					<span class="ui-button-text">N</span>
				</label>
				<label for="spinner">Size:</label>
				<span class="ui-spinner ui-widget ui-widget-content ui-corner-all">
					<input id="spinner" class="ui-spinner-input" name="value" autocomplete="off" role="spinbutton">
					<a class="ui-spinner-button ui-spinner-up ui-corner-tr ui-button ui-widget ui-state-default ui-button-text-only" tabindex="-1" role="button" aria-disabled="false">
						<span class="ui-button-text">
							<span class="ui-icon ui-icon-triangle-1-n">s</span>
						</span>
					</a>
					<a class="ui-spinner-button ui-spinner-down ui-corner-br ui-button ui-widget ui-state-default ui-button-text-only" tabindex="-1" role="button" aria-disabled="false">
						<span class="ui-button-text">
							<span class="ui-icon ui-icon-triangle-1-s"></span>
						</span>	
					</a>
				</span>
				<select id="sizeTypes" name="size">
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
					<option value="13">13</option>
					<option value="14">14</option>
					<option value="16">16</option>
					<option value="18">18</option>
					<option value="20">20</option>
					<option value="25">25</option>
					<option value="32">32</option>
					<option value="48">48</option>
					<option value="60">60</option>
					<option value="72">72</option>
				</select>
				<select id="fontFamiliesTypes" name="font">
					<option value="Times New Roman">Times New Roman</option>
					<option value="Georgia">Georgia</option>
					<option value="Arial">Arial</option>
					<option value="Verdana">Verdana</option>
					<option value="Courier New">Courier New</option>
					<option value="Lucida Console">Lucida Console</option>
					<option value="Helvetica">Helvetica</option>
					<option value="Gill Sans">Gill Sans</option>
					<option value="Avantgarde">Avantgarde</option>
					<option value="Palatino">Palatino</option>
					<option value="Andale Mono">Andale Mono</option>
					<option value="Florence">Florence</option>
					<option value="Impact">Impact</option>
					<option value="fantasy">fantasy</option>
				</select>
				<button onclick="">List</p> </button>
				<button onclick="">Title</p> </button>
				<p id="colorpickerHolder">
                </p>
                <script>
					$('#colorpickerHolder').ColorPicker({flat: true});
                </script>
				
				
				
			</div>
			<div id="contentTab2" class="content">
				<button onclick="">+</br>Slide</p> </button>
				<button onclick="">Text</p> </button>  
				<button onclick="">Image</p> </button>  
				<button onclick="">Video</p> </button>  
				<button onclick="">Overview</p> </button>  
				<button onclick="">Present</p> </button>  
			</div>
		
		

	</div>


<DIV class="ui-layout-west">
	
	
	New Slide
	
	
	</DIV>
	<script>
	$(document).ready(function () {
	$('body').layout({ applyDefaultStyles: true });
	});
	$(".content").hide();
	$("#contentTab1").show();
    </script>
</BODY>
</HTML>